@use "~/styles/variables.scss" as *;

.bill-list-card {
    border-radius: 25rpx;
    padding-bottom: 25rpx;
    .list-header {
        height: 80rpx;
        padding: 0 30rpx;
    }
    .bottom-line {
        height: 0;
        width: 1300rpx;
        margin-left: 25rpx;
        transform: translateX(-25%) scale(0.5);
        border-bottom: 1rpx dashed;
        opacity: 0.2;
    }
    .bill-item-container {
        .move-content {
            box-sizing: border-box;
            .bill-list-item {
                height: 172rpx;
                width: 700rpx;
                padding: 10rpx;
                box-sizing: border-box;
                .list-item-row {
                    padding: 10rpx 0;
                    .bill-info {
                        min-width: 200rpx;
                        align-items: baseline;
                        .note {
                            margin-left: 10px;
                            opacity: 0.8;
                        }
                    }
                    .tag-item {
                        width: 80rpx;
                        height: 32rpx;
                        text-align: center;
                        background: rgba(135,70,234, 0.1);
                        border-radius: 16rpx;
                        color: #8A4AEB;
                        line-height: 32rpx;
                        margin: 0 10rpx;
                    }
                    .money {
                        font-weight: bolder;
                        margin-right: 25rpx;
                    }
                    .pay {
                        color: $color-pay;
                    }
                    .income {
                        color: $color-income;
                    }
                }
            }
            .iconfont {
                padding: 0 12rpx;
                color: rgba(68, 178, 241, 0.8);
            }
        }
        .bill-move-action {
            width: 344rpx;
            height: 172rpx;
            .active-btn {
                color: #fff;
                height: 100%;
                &:first-child {
                    background-color: $color-income;
                }
                &:last-child {
                    background-color:  $color-pay;
                }
            }
        }
    }
}